<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的空间</title>
    <link href="qq/icon.jpg" rel="icon" type="image/x-ico">

    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="plugins/bootstrap/css/bootstrap.css" type="text/css">

    <style>
        * {
            box-sizing: border-box;
            /* background-color: grey; */
        }

        body {
            background-color: black;
        }

        #headerImg {
            width: 25px;
            height: 25px;
            padding-top: 0px;
            border-radius: 5px;
            /* padding: 6px; */
        }

        #header1 {
            padding-bottom: 10px;
        }
    </style>
</head>

<body>
    <div>

        <div class="container-fluid ">
            <div class="row">

                <nav class="navbar navbar-inverse" role="navigation">
                    <div class="container-fluid">
                        <div class="navbar-header" style="padding-left: 150px">
                            <button type="button" class="navbar-toggle" data-toggle="collapse"
                                data-target="#example-navbar-collapse">
                                <span class="sr-only">切换导航</span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <div style="float: left">
                                <a class="navbar-brand" href="#">
                                    <font color="white" size="5px">QQ空间</font>
                                </a>
                            </div>
                        </div>

                        <div class="collapse navbar-collapse" id="example-navbar-collapse" style="float:left">
                            <ul class="nav navbar-nav">

                                <li class="active"><a href="#">
                                        <img src="qq/person1.png" style="height:20px">
                                        <font color="grey">个人中心</font>
                                    </a></li>
                                <li><a href="#">
                                        <img src="qq/t2.png" style="height:20px">我的主页</a>
                                </li>
                                <li><a href="#">
                                        <img src="qq/t3.png" style="height:20px">好友</a></li>
                                <li><a href="#">
                                        <img src="qq/t8.png" style="height:20px">游戏</a></li>
                                <li><a href="#">
                                        <img src="qq/t4.png" style="height:20px">装扮</a></li>


                            </ul>
                        </div>

                        <div class="collapse navbar-collapse" id="example-navbar-collapse" style="float:right">
                            <ul class="nav navbar-nav">
                                <li><a href="#"><img src="qq/headerImg.jpg" id="headerImg">&nbsp;&nbsp;<font
                                            color="grey">
                                            Whiste</font></a></li>
                                <li style="width:30px"><a href="#"><img src="qq/t6.png" style="height:20px"></a></li>
                                <li style="width:30px"><a href="#"><img src="qq/t7.png" style="height:20px"></a></li>
                                <li><a href="#"><img src="qq/hz.gif" style="height:20px"></a></li>

                            </ul>
                        </div>

                    </div>
                </nav>
            </div>
        </div>

        <div style="width: 70%; height:50px; margin-left: 15% ">
            <img src="qq/mianpic.png" style="height:200px">
        </div>
    </div>

    <div class="content" style="width: 70%; height: 150px;;margin-top:180px ;margin-left: 15%;">

        <div style="width: 150px;height:100%;float: left;">
            <img src="qq/headerImg.jpg" style="height:100%;border: 3px solid blanchedalmond;">
        </div>
        <div style="float: left;margin-left: 10px;">
            <div>
                <h3 style="color:blanchedalmond">Whiste</h3>

            </div>
            <!-- 黄钻图标 -->
            <div style="float: left"> <img src="qq/hz2.png" width="50px" height="40px"></div>
            <div style="float: left;margin-left: 20px;">
                <span style="color:blanchedalmond"> 成长值1
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;成长速度-10/天
                </span>
                <!-- 进度条展示 -->
                <div class="progress progress-striped" style="width: 250px;height: 8px;">
                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60"
                        aria-valuemin="0" aria-valuemax="100" style="width: 0%;">

                    </div>
                </div>
            </div>
            <div style="float: left;margin-left: 0px;">
                <!-- 提示工具 -->
                <img src="qq/hz3.png">
            </div>
            <div class="container" style="clear: both;margin-left: 0px;width:100%">
                <div class="row">
                    <ul class="nav-tabs" style="border-bottom: none;">
                        <li><a href="#" style="color: blanchedalmond">主页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">日志&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">相册&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">留言板&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">说说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">个人档&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">音乐&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
                        <li><a href="#" style="color: blanchedalmond">更多</a></li>

                    </ul>
                </div>

            </div>

        </div>
        <div style="float: right;margin-top: 60px;margin-right: 30px;">
            <span style="color:blanchedalmond">
                今日访客:666&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;被挡访客:666 <br>
                总访客人数:&nbsp;666666;
            </span>
        </div>
        <div style="float: right;margin-top: 55px;margin-right: 10px">
            <img src="qq/title2.png" width="50px" height="50px">

        </div>
    </div>



    <div class="content" style="width:70%;;margin-top:20px ;margin-left: 15%;">

        <!-- 背景end   -->
        <div class="container">
            <div class="row">
                <div style="width: 180px; ;font-size: 14px;float: left;">
                    <div>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-user"
                                style="text-shadow: rgb(216, 206, 206) 3px -1px;"></span>
                            好友动态

                        </a> </li>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-heart-empty"></span>&nbsp;特别关心

                        </a></li>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            @&nbsp;与我相关

                        </a></li>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-play-circle"></span>&nbsp;空间达人</a>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-list-alt"></span>&nbsp;那年今日</a></li>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-asterisk"></span>&nbsp;腾讯课堂</a></li>

                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-th-large"></span>&nbsp;游戏应用</a>
                        <a href="#" class="list-group-item" style="background-color:#505050;color: blanchedalmond">
                            <span class="glyphicon glyphicon-star-empty"></span>&nbsp;我的收藏</a></li>

                    </div>

                </div>

                <!-- 中间 -->
                <div class="center-block" style="float: left;margin-left: 20px;">
                    <div style="padding: 0px;float: left;width: 550px;">
                        <form role="form">
                            <div class="form-group  has-feedback">
                                <textarea class="form-control" rows="1" placeholder="说点什么吧"
                                    style="background-color:#707070"></textarea>

                                <button class="btn btn-default glyphicon glyphicon-camera  form-control-feedback"
                                    style="height: 35px;width: 35px;background-color:#505050">
                                </button>
                            </div>

                        </form>
                    </div>
                    <div style="float: left">
                        <button class="btn btn-default glyphicon glyphicon-paperclip"
                            style="height: 35px;width: 35px;background-color:#505050"></button>

                    </div>



                    <div style="margin-top: 20px;clear: both;background-color: #505050;">
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"
                                        style="color: black;padding-left:0px ;background-color:#505050">
                                        全部动态 <b class="caret"></b>
                                    </a>
                                    <ul class="dropdown-menu" style="background-color:#707070">
                                        <li>
                                            <a href="#" style="background-color:#707070">全部动态</a>
                                        </li>
                                        <li>
                                            <a href="#" style="background-color:#707070">相册</a>
                                        </li>
                                        <li>
                                            <a href="#" style="background-color:#707070">日志</a>
                                        </li>

                                    </ul>
                                </li>
                            </ul>

                            <ul class="nav navbar-nav navbar-right">
                                <li>
                                    <a href="1-空间.html" style="color: black;background-color:#505050"><span
                                            class=" glyphicon glyphicon-repeat"></span></a>
                                </li>
                                <li>
                                    <a href="#" style="color: black;background-color:#505050"><span
                                            class=" glyphicon glyphicon-cog"></span></a>
                                </li>

                            </ul>
                        </div>
                    </div>

                    <div style="margin-top: 20px;width: 600px;height: 500px;background-color: #505050">
                        <div style="float: left;padding: 20px">
                            <img src="qq/headerImg.jpg" class="img-circle" width="50px" height="50px">

                        </div>
                        <div style="float: left;padding-top: 18px"><a href="#"
                                style="font-size: 18px;color: black">Whiste</a>
                            <p style="margin-top:3px;font-size: 12px;color: rgb(167, 166, 164)">00:00</p>
                        </div>
                        <div style="clear: both;margin-left: 40px;">
                            <p style="color:blanchedalmond ">
                                红日初升，其道大光；河出伏流，一泻汪洋；潜龙腾渊，鳞爪飞扬；<br>
                                乳虎啸谷，百兽震惶；鹰隼试翼，风尘翕张；奇花初胎，矞矞皇皇；<br>
                                干将发硎，有作其芒；天戴其苍，地履其黄；纵有千古，横有八荒；<br>
                                前途似海，来日方长。<br>
                                <br>
                                美哉，我少年中国，与天不老！壮哉，我中国少年，与国无疆！
                        </div>

                        <div style="margin:30px ">
                            <img src="qq/p1.jpg" height="200px" width="230px">
                            <img src="qq/p2.png" height="200px" width="230px">
                        </div>


                    </div>

                    <!-- 中间end -->
                </div>

                <div style="float: left; margin-left: 20px">

                    <div style="background-color: #505050;height:80px;width:240px">
                        <div style="width:30%;height:100%;background-color:black;text-align:center;padding-top: 18px;float: left;">
                            <font color="blanchedalmond">09.01</font><br>
                            <font color="blanchedalmond" size="5px">签到</font>
                        </div>
                        <div style="width:50%;height:100%;padding-left: 10px;padding-top: 18px;float: left;">
                            <font color="blanchedalmond">本月签到次数</font><br>
                            <font color="blanchedalmond" size="5px">0次</font>
                        </div>
                    </div>
                    <div style="background-color: #505050;height:300px;width:240px;margin-top: 20px">
                        
                    </div>
                    <div style="background-color: #505050;height:400px;width:240px;margin-top: 20px">
                        
                    </div>

                </div>


            </div>
        </div>
    </div>



    <!-- bootstrap中的js插件依赖于jquery框架,所有必须先引入jquery的js文件 -->
    <script src="plugins/jquery/jquery.min.js"></script>
    <!-- 引入bootstrap的js文件 -->
    <script src="plugins/bootstrap/js/bootstrap.js"></script>

</body>

</html>